<template>
  <div class="app-container">
    <el-row type="flex" class="row-bg btn-row" justify="end">
      <el-button class="filter-item" size="mini" v-if="$store.state.user.user_perms.includes('302')" @click="add" type="primary" icon="el-icon-plus">{{$t("merchant.add")}}</el-button>
    </el-row>
    <el-table align="center" :data="mchData.list" v-loading.body="listLoading"  @sort-change="sortlist"  element-loading-text="Loading" stripe border fit highlight-current-row>
      <el-table-column prop="id" label='ID' sortable width="160" align="center"></el-table-column>
      <el-table-column prop="name" :label='$t("merchant.name")' sortable width="400" align="center"></el-table-column>
      <el-table-column prop="updated_at" :label='$t("merchant.updated_at")' sortable width="250" align="center"></el-table-column>
      <el-table-column prop="created_at" :label='$t("merchant.created_at")' width="250" align="center"></el-table-column>
      <el-table-column prop="status" :label='$t("merchant.status")' sortable width="300" align="center">
        <template slot-scope="scope">
          <el-alert class="el-badge_status" :title="changeTitleStatus(scope.row)" center :type="(scope.row.status === 1 ? 'success' : 'error')" :closable="false"></el-alert>
        </template>
      </el-table-column>      
      <el-table-column :label='$t("merchant.action")' width="300" fixed="right" align="center">
        <template slot-scope="scope">
          <div>
            <el-button type="text" size="small" v-if="$store.state.user.user_perms.includes('305') && roles > 4" @click="update(scope.row)">{{$t("merchant.update")}}</el-button>
            <el-button type="text" size="small" v-if="$store.state.user.user_perms.includes('306') && roles > 4" @click="remove(scope.row)">{{$t("merchant.remove")}}</el-button>
            <el-button type="text" size="small" v-if="roles > 4" @click="update_status(scope.row)">{{changeActionStatus(scope.row)}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.$size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="mchData.total_count">
      </el-pagination>
    </div>
    <save-mch v-if="showMchInfo" :showMchInfo.sync ="showMchInfo" :mch_id="mch_id"></save-mch>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import saveMch from './saveMch'
import { getMchList, deleteMerchant, updateMerchantStatus } from '@/api/merchant'

export default {
  components: { saveMch },
  data() {
    return {
      mchData: {},
      q: {$size: 30, $page: 1, $orderby: '-id'},
      listLoading: true,
      showMchInfo: false,
      mch_id: null
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  filters: {},
  created() {
    this.getList()
  },
  deactivated(){
    this.listLoading = false
  },
  methods: {
    sortlist(sort){
      this.q.$orderby = sort.prop
      this.getList()
    },
    add(){
      this.mch_id = null
      this.showMchInfo = true
    },
    update(row){
      this.mch_id = row.id
      this.showMchInfo = true
    },
    remove(row){
      this.$confirm(this.$t('merchant.confirm_delete') + ` ${row.id}？`, this.$t('merchant.confirm_delete_title'), {
        confirmButtonText: this.$t('merchant.ok'),
        cancelButtonText: this.$t('merchant.cancel'),
        type: 'warning'
      }).then(() => {
        deleteMerchant(row.id).then(res => {
          if(res.status === 0){
            this.$message({ type: 'success', message: this.$t('merchant.confirm_success') })
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('merchant.cancelled')
        })
      })
    },
    update_status(row){
      row.status = this.changeStatus(row)
      this.$confirm(this.$t('merchant.confirm_update_status') + ` ${row.id}？`, this.$t('merchant.confirm_update_status_title'), {
        confirmButtonText: this.$t('merchant.ok'),
        cancelButtonText: this.$t('merchant.cancel'),
        type: 'warning'
      }).then(() => {
        updateMerchantStatus(row).then(res => {
          if(res.status === 0){
            this.$message({ type: 'success', message: this.$t('merchant.confirm_success_status') })
            this.getList()
          }
        })
      }).catch(() => { 
        this.$message({
          type: 'info',
          message: this.$t('merchant.cancelled')
        })
      })
    },
    handleSizeChange (val) {
      this.q.$size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.q.$page = val
      this.getList()
    },
    getList() {
      let params = Object.assign({
        $orderby: '-updated_at'
      }, this.q)
      this.listLoading = true
      getMchList(params).then(res => {
        if (res.status === 0) {
          this.listLoading = false
          this.mchData = res.data
        }
      })
    },
    changeTitleStatus(value) {
      return this.$t('merchant.value.' + value.status)
    },
    changeActionStatus(value) {
      return this.$t('merchant.revert_val.' + value.status)
    },
    changeStatus(value) {
      return (value.status === 0 ? 1 : 0)
    }
  },
  watch: {
    showMchInfo() {
      if(!this.showMchInfo){
        this.getList()
      }
    }
  }
}

export const enMerchant = {
  name: 'Name',
  key: 'Key',
  updated_at: 'Updated Time',
  created_at: 'Created Time',
  action: 'Action',
  update: 'Edit',
  remove: 'Delete',
  add: 'Add',
  confirm_update_status_title: 'Update Status', 
  confirm_update_status: 'Do you want to change the status of this range',
  confirm_delete: 'Are you sure you want to delete the item with the ID',
  confirm_delete_title: 'Delete Merchant',
  confirm_success: 'Successfully Deleted!',
  confirm_success_status: 'Successfully Updated!',
  ok: 'OK',
  cancel: 'Cancel',
  cancelled: 'Cancelled',
  status: 'Status',
  value: {
    0: 'Inactive',
    1: 'Active'
  },
  revert_val: {
    0: 'Active',
    1: 'Inactive'
  }
}

export const zhMerchant = {
  name: '名称',
  key: '密钥',
  updated_at: '最后更新时间',
  created_at: '创建时间',
  action: '操作',
  update: '编辑',
  remove: '删除',
  add: '新增商户',
  confirm_update_status_title: '更新状态', 
  confirm_update_status: '是否要更改此范围的状态',
  confirm_delete: '您确定要删除带有ID的项目吗',
  confirm_delete_title: '删除商户',
  confirm_success: '删除成功!',
  confirm_success_status: '成功更新!',
  ok: '确定',
  cancel: '取消',
  cancelled: '已取消删除',
  status: '状态',
  value: {
    0: '禁用',
    1: '启用'
  },
  revert_val: {
    0: '启用',
    1: '禁用'
  }
}
</script>
<style>
  .btn-row{
    padding: 0 0 1rem 0;
  }
</style>
